<template>
  <div class="pages prepaid">
    <div class="pageLevel" v-if="!sub">
      <div class="head">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="未出账单" v-if="setRole('未出账单查看')" name="0">
            <!-- gs -->
            <div v-if="isShop!='0'">
              <div class="tableSearch">
                <el-form label-width="100px" class="demo-ruleForm" size="small">
                  <el-form-item label-width="100px" label="门店：" style="margin-left:0px">
                    <el-select v-model="selectdata.selects" size="small">
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="下个账单日：" style="margin-left:8px">
                    <el-date-picker :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="selectdata.bill" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
                    <el-button type="primary" @click="search()" size="mini">搜索</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="total-income">
                <div class="all-income">
                  未出账单金额 :
                  <span>{{totalRemainingPrice}}</span> 元
                </div>
              </div>
              <!-- 表格 -->
              <div class="tableMain">
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                  <el-table-column prop="shopName" label="门店" align="center">
                  </el-table-column>
                  <el-table-column prop="checkCycle" label="对账周期" align="center">
                    <template slot-scope="scope">
                      <div>{{scope.row.checkCycle}}个月 </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="checkDate" label="对账日期" align="center">
                    <template slot-scope="scope">
                      <div>{{scope.row.checkDate}}日 </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="未出账金额" align="center">
                  </el-table-column>
                  <el-table-column prop="currentCheckDate" label="下个账单日" align="center" :formatter="currentCheckDate">
                  </el-table-column>
                  <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                      <el-button size="small" v-if="setRole('未出账单明细')" @click="detailed('/financial-center/storedValue-finance/finance-account/details-account',scope.row.id,scope.row.shopId)" type="text" class="addDetail">明细</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pageblock">
                  <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="revoke.total">
                  </el-pagination>
                </div>
              </div>
            </div>
            <div v-if="isShop=='0'">
              <div class="pageLevel">
                <!-- 头部 -->
                <!-- 搜索框 -->
                <div class="total-income">
                  <div class="all-income">
                    <span style="margin-left:80px">账期：{{store.startTime}}——{{store.endTime}}</span>
                    <span style="margin-left:80px">未出账金额：{{store.price}}元</span>
                    <span style="margin-left:80px"> 下个账单日：{{store.currentCheckDate}}</span>
                  </div>
                </div>
                <div class="tableSearch">
                  <el-form label-width="100px" class="demo-ruleForm" size="small">
                    <el-form-item label="交易类型:" style="margin-left:10px">
                      <el-select v-model="selectdata.type" placeholder="请选择财务类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="售卖" value="1"></el-option>
                        <el-option label="退货退款" value="2"></el-option>
                        <!-- <el-option label="上个账期未结" value="3"></el-option> -->
                      </el-select>
                    </el-form-item>
                    <el-form-item label="类型:" style="margin-left:10px">
                      <el-select v-model="selectdata.tradeType" placeholder="请选择交易类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="商品售卖" value="1"></el-option>
                        <el-option label="服务售卖" value="2"></el-option>
                        <el-option label="计次卡" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="交易时间:" style="margin-left:10px">
                      <el-date-picker :picker-options="pickerBeginDateBefore" :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="会员手机号：" label-width="100px" style="margin-left:10px">
                      <el-input clearable v-model="selectdata.keyword" placeholder="请输入会员手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="wxser" class="wxelForm" label-width="55px">
                      <el-button type="primary" @click="searchmd" size="mini">搜索</el-button>
                    </el-form-item>
                    <el-form-item label="" label-width="35px">
                      <el-button type="primary" icon="el-icon-download" size="mini" @click="download" class="Button">导出</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- 表格 -->
                <div class="tableMain">
                  <el-table :data="tableDataStore" border style="width: 100%">
                    <el-table-column prop="payOrderNo" label="订单号" align="center">
                    </el-table-column>
                    <el-table-column prop="tradeTime" label="交易时间" align="center" :formatter="formatTime">
                      <!-- :formatter="formatTimes" -->
                    </el-table-column>
                    <el-table-column prop="typeName" label="交易类型" align="center">
                    </el-table-column>
                    <el-table-column prop="chlidTypeName" label="类型" align="center">
                    </el-table-column>
                    <el-table-column prop="iphone" label="会员手机" align="center">
                    </el-table-column>
                    <el-table-column prop="price" label="储值支付金额" align="center">
                      <template slot-scope="scope">
                        <div>
                          <span v-if="scope.row.type==2">-</span>
                          <span v-if="scope.row.type==1">+</span>
                          <span>{{scope.row.price}}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="accountPrice" label="账户余额" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                      <template slot-scope="scope">
                        <el-button size="small" v-if="scope.row.type!=3" @click="routerPush('/financial-center/storedValue-finance/finance-account/details-see',scope.row.detailOrderNo,scope.row.chlidType,scope.row.payOrderNo)" type="text" class="addDetail">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="pageblock">
                    <el-button size="small" type="primary" class="topage" @click="toPageStore">确定</el-button>
                    <el-pagination @size-change="handleSizeChangeStore" @current-change="handleCurrentChangeStore" :current-page="currentPageStore" :page-sizes="[5,10,20,50]" :page-size="pageSizeStore" layout="total, sizes, prev, pager, next, jumper" :total="totalStore">
                    </el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已出未结账单" v-if="setRole('已出未结账单查看')" name="1">
            <!-- 搜索框 -->
            <div class="tableSearch">
              <el-form label-width="100px" class="demo-ruleForm" size="small">
                <el-form-item label-width="100px" label="门店：" style="margin-left:0px" v-if="isShop!='0'">
                  <el-select v-model="selectdata.selects" size="small">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账单日期：" style="margin-left:8px">
                  <el-date-picker :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="selectdata.bill" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
                  <el-button type="primary" @click="search()" size="mini">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="total-income" v-if="isShop!='0'">
              <div class="all-income">
                未结账单金额 :
                <span>{{totalRemainingPrice}}</span> 元
              </div>
            </div>
            <!-- 表格 -->
            <div class="tableMain">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="shopName" label="门店" align="center" v-if="isShop!='0'">
                </el-table-column>
                <el-table-column prop="currentCheckDate" label="账单日期" align="center" :formatter="currentCheckDate">
                </el-table-column>
                <el-table-column prop="price" label="账单金额" align="center">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <el-button size="small" v-if="setRole('已出未结账单明细')" @click="detailed('/financial-center/storedValue-finance/finance-account/details-account',scope.row.id,scope.row.shopId)" type="text" class="addDetail">明细</el-button>
                    <el-button size="small" v-if="isShop!='0'&& setRole('已出未结账单支付')" @click="recharge(scope.row.shopName,scope.row.price,scope.row.id)" type="text" class="addDetail">去支付</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageblock">
                <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="revoke.total">
                </el-pagination>
              </div>

            </div>
          </el-tab-pane>
          <el-tab-pane label="历史账单" v-if="setRole('历史账单查看')" name="2">
            <!-- 搜索框 -->
            <div class="tableSearch">
              <el-form label-width="100px" class="demo-ruleForm" size="small">
                <el-form-item label-width="100px" label="门店：" style="margin-left:0px" v-if="isShop!='0'">
                  <el-select v-model="selectdata.selects" size="small">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账单日期：" style="margin-left:8px">
                  <el-date-picker :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="selectdata.bill" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
                  <el-button type="primary" @click="search()" size="mini">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <!-- 表格 -->
            <div class="tableMain">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="shopName" label="门店" align="center" v-if="isShop!='0'">
                </el-table-column>
                <el-table-column prop="currentCheckDate" label="账单日期" align="center" :formatter="currentCheckDate">
                </el-table-column>
                <el-table-column prop="price" label="账单金额" align="center">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <el-button size="small" v-if="setRole('历史账单明细')" @click="detailed('/financial-center/storedValue-finance/finance-account/details-account',scope.row.id,scope.row.shopId)" type="text" class="addDetail">明细</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageblock">
                <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="revoke.total">
                </el-pagination>
              </div>

            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" class="addshopname" title="支付确认" :visible.sync="dialogFormVisible" width="610px">
      <el-form :model="form" :rules="rules" ref="form" center>
        <el-form-item label="支付门店：" :label-width="formLabelWidth">
          <span>{{shopName}} </span>
        </el-form-item>
        <el-form-item label="支付金额：" :label-width="formLabelWidth">
          <span style=' margin-left: 10px'>{{price}}元</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" center>
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="billpay()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  listShopChecks,
  billpay,
  findByListExport,
  listTradeDetails,
  selectBaseShopPageList,
  getShopCheck,
  listTradeDetailsExport
} from "@/api";
var fileDownload = require("js-file-download");
import util from "@/util";
import s from "@/util/state";
import sdInput from "@/components/SdInput";
export default {
  components: { sdInput },
  computed: mapState(["merchantId", "sub", "power", "isShop"]),
  data() {
    return {
      startTime: "",
      endTime: "",
      pickerBeginDateBefore: {
        disabledDate: time => {
          // console.log(new Date(this.startTime).getTime());
          return (
            new Date(this.endTime).getTime() < time.getTime() ||
            time.getTime() < new Date(this.startTime).getTime() - 8.64e7
          );
        }
      },
      price: "",
      shopName: "",
      orderType: "0",
      Data: {},
      totalRemainingPrice: "",
      prePay: "",
      zjPay: "",
      rules: {},
      // formData: {
      orderNo: "",
      orderPrice: "",
      remainingPrice: "",
      // },
      paymentSta: "1",
      timer: "",
      form: {
        operPrice: "",
        tradeType: "2"
      },
      store: {},
      formLabelWidth: "120px",
      dialogFormVisible: false,
      pageSize: 10,
      total: 0,
      currentPageStore: 1,
      pageSizeStore: 10,
      totalStore: 0,
      currentPage: 1,
      activeName: "0",
      selectdata: {
        tradeType: "",
        type: "",
        selects: "",
        bill: []
      },
      revoke: { total: 0 },
      tableData: [],
      tableDataStore: [],
      options: [],
      value: []
    };
  },
  created() {
    this.getTime();
    this.powers();
  },
  mounted() {
    if (this.activeName == "0" && this.isShop == "0") {
      this.getShopCheck();
    } else {
      this.getdata(10, 1);
    }
    this.getStoreList();
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getdata(this.pageSize, this.currentPage);
        }
      },
      deep: true
    }
  },
  methods: {
    getStoreList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: "3"
      }).then(res => {
        this.options = res.data.list;
      });
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    powers() {
      //判断权限显示tab
      if (this.setRole("未出账单查看") == true) {
        this.activeName = "0";
      } else if (this.setRole("已出未结账单查看") == true) {
        this.activeName = "1";
      } else if (this.setRole("历史账单查看") == true) {
        this.activeName = "2";
      }
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    formatTime: function(row) {
      return util.foryear(row.tradeTime) + " " + util.fortime(row.tradeTime);
    },
    formatTimes: function(row) {
      return this.getdatetime(row.nextCheckDate);
    },
    currentCheckDate: function(row) {
      return this.getdatetime(row.currentCheckDate);
    },
    getdatetime(now) {
      now = parseInt(now);
      now = new Date(now);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      // let seconds = now.getSeconds()
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return month + "月" + date + "日";
    },
    getTime() {
      //---------------默认当前时间
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 1 && d <= 9) {
        d = "0" + d;
      }
      let time = y + "-" + m + "-" + d;
      //  this.selectdata.bill[0]= time;
      this.$set(this.selectdata.bill, 0, time);
      this.$set(this.selectdata.bill, 1, time);
      this.value[0] = time;
      this.value[1] = time;
    },
    billpay() {
      let postdata = {
        id: this.listId
      };
      billpay(postdata).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "支付成功",
            type: "success"
          });
          this.orderNo = "";
          this.dialogFormVisible = false;
          this.getdata(10, 1);
        }
      });
    },
    //**** 搜索*/
    search() {
      this.getdata(this.pageSize, this.currentPage);
    },
    searchmd() {
      this.storedata(this.pageSize, this.currentPage);
    },
    //******路由跳转 */
    detailed(name, id, shopId) {
      util.routerTo(name, {
        activeName: this.activeName,
        shopId: shopId,
        id: id
      });
    },
    routerPush(name, id, type, payOrderNo) {
      util.routerTo(name, {
        id: id,
        type: type,
        orderType: type,
        payOrderNo: payOrderNo
      });
    },
    //***** 支付*/
    recharge(shopName, price, id) {
      this.shopName = shopName;
      this.listId = id;
      this.price = price;
      this.dialogFormVisible = true;
    },
    handleClick(tab, event) {
      this.getTime();
      this.paymentSta = tab.name;
      this.pageSize = 10;
      this.currentPage = 1;
      this.getdata(10, 1);
    },
    // 未出账单--门店 导出
    download() {
      let datas = {
        companyId: "",
        shopId: this.merchantId,
        type: this.selectdata.type,
        chlidType: this.selectdata.tradeType,
        iphone: this.selectdata.keyword,
        startTime: this.value[0] + " 00:00:00",
        endTime: this.value[1] + " 23:59:59"
      };
      if (
        datas.endTime == "" ||
        datas.endTime == null ||
        datas.startTime == "" ||
        datas.startTime == null
      ) {
        this.$message({
          type: "error",
          message: "请检查导出条件是否完整"
        });
      }
      //console.log(this.tableData.length);
      if (this.tableDataStore.length == 0) {
        this.$message({
          type: "error",
          message: "数据为空不能导出"
        });
      } else {
        listTradeDetailsExport(datas)
          .then(res => {
            if (res.data == undefined) {
              let fileName = "储值交易流水导出.xlsx";
              fileDownload(res, fileName);
            } else {
              this.$message(res.data.msg);
            }
          })
          .catch(e => {});
      }
    },
    //***** */查询改商户账期
    getShopCheck() {
      let postdata = {
        // id: util.getQuery("id")
        shopId: this.merchantId
      };
      getShopCheck(postdata).then(res => {
        this.store = res.data;
        this.startTime = util.foryear(parseInt(res.data.startTime));
        this.endTime = util.foryear(parseInt(res.data.endTime));
        this.$set(this.value, 0, util.foryear(parseInt(res.data.startTime)));
        this.$set(this.value, 1, util.foryear(parseInt(res.data.endTime)));
        this.store.startTime = this.getdatetime(this.store.startTime);
        this.store.endTime = this.getdatetime(this.store.endTime);
        this.store.nextCheckDate = this.getdatetime(this.store.nextCheckDate);
        this.store.currentCheckDate = this.getdatetime(
          this.store.currentCheckDate
        );

        this.storedata(10, 1);
      });
    },
    //***** */ 未出账单-门店交易
    storedata(pageSize, pageNum) {
      if (!this.value) {
        this.value = ["", ""];
      }
      let postdata = {
        companyId: "",
        shopId: this.merchantId,
        iphone: this.selectdata.keyword,
        type: this.selectdata.type,
        chlidType: this.selectdata.tradeType,
        pageNum: pageNum,
        pageSize: pageSize,
        startTime: this.value[0] + " 00:00:00",
        endTime: this.value[1] + " 23:59:59",
        isCheck: "1",
        status: this.activeName
      };
      listTradeDetails(postdata).then(res => {
        this.tableDataStore = res.data.list;
        this.totalStore = res.data.pageTotal;
      });
    },
    //***** */ 该商户账单-
    getdata(pageSize, pageNum) {
      if (!this.selectdata.bill) {
        this.selectdata.bill = ["", ""];
      }
      let Data = {
        pageNum: pageNum,
        status: this.activeName,
        pageSize: pageSize,
        startTime: this.selectdata.bill[0] + " 00:00:00",
        endTime: this.selectdata.bill[1] + " 23:59:59"
      };
      if (this.isShop == "0") {
        this.$set(Data, "companyId", "");
        this.$set(Data, "shopId", this.merchantId);
      } else {
        this.$set(Data, "companyId", this.merchantId);
        this.$set(Data, "shopId", this.selectdata.selects);
      }
      listShopChecks(Data).then(res => {
        this.tableData = res.data.list;
        this.totalRemainingPrice = res.data.currentPagePriceTotal.toFixed(2);
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].price = this.tableData[i].price.toFixed(2);
        }
        this.$set(this.revoke, "total", res.data.pageTotal);
      });
    },
    //该商户账单-分页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    //该商户未出账单门店-分页
    toPageStore() {
      this.storedata(this.pageSizeStore, 1);
    },
    handleSizeChangeStore(val) {
      this.pageSizeStore = val;
      this.storedata(val, this.currentPageStore);
    },
    handleCurrentChangeStore(val) {
      this.currentPageStore = val;
      this.storedata(this.pageSizeStore, val);
    }
  }
};
</script>
<style scoped>
.head {
  margin-top: 10px;
  /* background: #fff; */
}
.box-revoke {
  position: absolute;
  left: 30px;
  top: 0px;
}
.box-gode {
  position: absolute;
  left: 200px;
  top: 0px;
}
.box {
  width: 500px;
  height: 38px;
  margin-left: 40px;
  position: relative;
}
.prepaid .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 0px 0px 10px 0px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}
.prepaid .total-income .all-income {
  margin-left: 30px;
}
.prepaid .total-income .all-income span {
  margin-left: 10px;
}
</style>
